<template>
	<view>
		<view class="user-datum">
			<view class="user-header">
				<button class="user-head" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> 
					<image style="width: 120rpx;height: 120rpx;" :src="headimg" alt=""/>
				</button>
				<view class="user-xx" >
					<view class="user-name" @click="getname">
            {{username}}
            <!-- <input type="nickname" :value="username"  @click="nameInput" :readonly="true" placeholder="禁止聚焦"/> -->
					
					</view>
             
					<view class="user-phone" >
						
            <button v-if="getphone"  class="getlogin"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >未授权手机号</button>  
            <view class="userphone" v-else> 
              {{tel}}
            </view>
					</view>
				</view>
			</view>
	<!-- 		<view class="turnvip">
				<view class="turnvip-box">
					<view class="">
						<image class="vipimg" src="https://www.iwangbang.com/skin/wx_mp_aixz/vip.png" mode=""></image>
					</view>
					<view class="vipsi">
						完成任务,&nbsp;&nbsp;获取永久免费使用权
					</view>
					<view class="">
						<button type="default" class="grant" @click="openVip">立即完成</button>
					</view>
				</view>
				<view class="arc"></view>
			</view> -->
		</view>
		<view class="middle">

	<!-- 		<view class="vd-box">
				<view class="residue-V">
					
					<view class="">
						剩余免费使用时间：
					</view>
          <view class="" style="display: flex;align-items: center;">
          	<span class="residue-text">{{timer == "暂未开通" || timer == "已过期" ? '0' : exptime }}</span><span>{{exptime == '永久免费' ? '' : '天'}}</span>
          </view>
				</view>
			</view> -->

			<!-- <view class="fllist">
				<view class="zl-list1" @click="cliopen('申请推广员')">
					申请推广员
					<uni-icons class="iconright" type="right" size="15"></uni-icons>
				</view>
				
			</view> -->

			<view class="fllist">
        
     <!--   <view class="zl-list1" @click="cliopen('邀请好友')">
        	邀请好友
        	<uni-icons class="iconright" type="right" size="15"></uni-icons>
        </view>
			
				<view class="zl-list1" @click="cliopen('开通会员')">
					开通会员
					<uni-icons class="iconright" type="right" size="15"></uni-icons>
				</view> -->
        <view class="zl-list1" @click="cliopen('我要报名')">
					我要报名
					<uni-icons class="iconright" type="right" size="15"></uni-icons>
				</view>
        <!-- 	<view class="zl-list1" @click="cliopen('模型')">
        		模型选择
        		<uni-icons class="iconright" type="right" size="15"></uni-icons>
        	</view> -->
         <!-- <view class="zl-list" @click="cliopen('合作推广')">
          	合作推广
          	<uni-icons class="iconright" type="right" size="15"></uni-icons>
          </view> -->
			</view>

			<view class="fllist">
				<view class="zl-list1" @click="cliopen('用户须知')">
					用户须知
					<uni-icons class="iconright" type="right" size="15"></uni-icons>
				</view>
				<view class="zl-list1" @click="cliopen('联系反馈')">
					联系我们
					<uni-icons class="iconright" type="right" size="15"></uni-icons>
				</view>
				<!-- <view class="zl-list" @click="cliopen('关于我们')">
					关于我们
					<uni-icons class="iconright" type="right" size="15"></uni-icons>
				</view> -->
			<!-- 	<view class="zl-list" @click="cliopen('联系客服')">
					联系客服
					<uni-icons class="iconright" type="right" size="15"></uni-icons>
				</view> -->
			</view>

		</view>
    
    <view>
    			<uni-popup  class="" ref="inputDialog" type="dialog" background-color="#fff" :mask-click="false">
            <view class="namebox">
              <view class="xgname">
                修改昵称
              </view>
              <view class="assfh" style="font-size: 35rpx;">
                <view class="" class="sffname">昵称：</view><input class="getinput" type="nickname" :value="bcname"   @input="nameInput" @blur="nameInput"  placeholder="请输入昵称" />
              </view>
              <view class="" style="display: flex;margin-top: 50rpx;">
                <button class="buttoncancel" @click="cancelname">取消</button>
                <button class="buttonok" @click="btnnameok">确定</button>
              </view>
            </view>
          </uni-popup>
    </view>
	</view>
</template>

<script>
	export default {
 
    onPullDownRefresh() {
      setTimeout(()=> {
        this.getTimer()
        uni.stopPullDownRefresh()  
      },1000)
    },
		data() {
			return {
				username:'用户名',
				headimg:'',
				tel:'未绑定手机号',
				unionid:'',
				openid:'',
        getphone:true,
        timer:'',
        exptime:0,
        bcname:'',
        judgext:true
			};
		},
		onLoad() {
			// this.getTimer()
		},
		onShow() {
			console.log(uni.getStorageSync('wbyun_token'),'989899999999=');
			console.log(uni.getStorageSync('wbyun_headimg'));
      console.log(uni.getStorageSync('wbyun_icode'),'1122');
			this.headimg = uni.getStorageSync('wbyun_headimg');
      console.log(this.headimg,'111222');  
			console.log(uni.getStorageSync('wbyun_username'),uni.getStorageSync('wbyun_headimg'),'77777');
			this.username = uni.getStorageSync('wbyun_username');
			console.log(uni.getStorageSync('wbyun_tel'));
			this.tel = uni.getStorageSync('wbyun_tel');
      console.log(uni.getStorageSync('wbyun_tel'),'99999');
      if(uni.getStorageSync('wbyun_token') == null || uni.getStorageSync('wbyun_token')==''){
        console.log(uni.getStorageSync('wbyun_token'),'111111111110000000000000');
      	uni.navigateTo({
      		url:'/pagesA/tellogin/tellogin'
      	})
      }
      if(this.tel !== '未授权手机号' || this.tel == null) {
        this.getphone = false
      }
      let ua = uni.getSystemInfoSync().platform;
      console.log(ua,'99978');
      if(ua == 'ios') {
        this.judgext = false
      }
			// this.getTimer()
			// this.checkSession();
		},
    onShareTimeline:function(res){
          return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            query: "inviteCode="+uni.getStorageSync('wbyun_icode')
          }
        },
    onShareAppMessage(res) {
      console.log(res);
      console.log(uni.getStorageSync('wbyun_icode'));
      return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            path: '/pages/index/index?inviteCode=' + uni.getStorageSync('wbyun_icode')
          }
    },
		methods: {
     
			getTimer() {
        uni.request({
        	url: getApp().globalData.apiDomain+'/vip/getVIPEndTime',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
             this.timer = res.data.datas
              let jsc = Date.parse(res.data.datas) - Date.now()
              this.convertTimestamp(jsc)
        			return;   
        		}else if(res['data']['code'] == '100500') {              uni.showToast({              	title:res['data']['msg'],                 	icon: 'none'              });              uni.setStorageSync('wbyun_token','');
              uni.setStorageSync('wbyun_username','');
              uni.setStorageSync('wbyun_headimg','');
              uni.setStorageSync('wbyun_tel','');
              uni.setStorageSync('wbyun_icode','');
              uni.navigateTo({
              	url:'/pagesA/tellogin/tellogin'
              })            } else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      convertTimestamp(timestamp) {
           let timediff =  timestamp / 1000
           let hours = parseInt(timediff / 3600);
           this.exptime =  Math.ceil(hours / 24)
           console.log(this.exptime);
           if(this.exptime>= 1800) {
             this.exptime = '永久免费'
           }
      },
			
			cliopen(e) {
				 if (e == '邀请好友') {
					uni.navigateTo({
						url: '/pagesB/subson/subson/invite'
					})
				} else if (e == '模型') {
					uni.navigateTo({
						url: '/pagesB/subson/subson/model'
					})
				} else if (e == '开通会员') {
          if(this.judgext == false) {
            uni.navigateTo({
            	url: '/pagesB/subson/subson/opinion'
            })
          }else {
            uni.navigateTo({
            	url: '/pagesB/subson/subson/purchase'
            })
          }
					
				}else if(e == '我要报名'){
            console.log('1');
            uni.navigateTo({
            	url: '/pagesB/subson/subson/apply'
            })
          } else if (e == '用户须知') {
					uni.navigateTo({
						url: '/pagesB/subson/subson/course'
					})
				} else if (e == '联系反馈') {
					uni.navigateTo({
						url: '/pagesB/subson/subson/opinion'
					})
				} else if (e == '关于我们') {
					uni.navigateTo({
						url: '/pagesB/subson/subson/in_regard'
					})
				} else if (e == '合作推广') {
          console.log();
          if(uni.getStorageSync('wbyun_tel') == '未授权手机号') {
            uni.showToast({
              	title: '请先授权手机号！',
              	icon: 'none'
              });
          }else {
            uni.navigateTo({
            	url: '/pagesC/popularize/popularize'
            })
          }
					
				} 

			},
      openVip() {
        uni.navigateTo({
        	url: '/pagesB/subson/subson/task'
        })
        
      },
      getuserphone() {
        console.log(this.tel);
      
      },
      getPhoneNumber(e) {
        console.log(123);
      	var that = this; 
      	console.log(e.detail);
        if(e.detail.errMsg == "getPhoneNumber:fail Error: 用户绑定的手机需要进行验证，请在客户端完成短信验证步骤") return
      	console.log(e.detail.code) // 动态令牌
      	console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
      	console.log(e.detail.errno) // 错误码（失败时返回）
      	wx.request({
      		url: getApp().globalData.apiDomain + 'user/getPhoneNumber',
          header: {
            'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
          	'token':uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
          },
      		data: {
      			code: e.detail.code
      		},
          
      		success(data) {
            if(data['data']['code'] == 200) {
              
              console.log(data['data']);
              let newdata = data['data']['datas'];
              if(newdata.msg == "授权出错") return
                
             
              console.log(newdata);
              that.getphone = false
              uni.setStorageSync('wbyun_tel', newdata.tel);
              if(newdata.update == true) {
                that.gainuser(newdata.user_id)
              }
              
              that.tel = newdata;
              that.tel = uni.getStorageSync('wbyun_tel');
              console.log('手机号',that.tel);
            }else {
              uni.showToast({ 
              	title: data['data']['msg'],  
              	icon: 'none'
              });
              that.getphone = true
            }
      			
      			
      		}
      	})
      },
     onChooseAvatar(e) {
        console.log(e);
        
        uni.getFileSystemManager().readFile({
              filePath: e.detail.avatarUrl, //照片的临时地址
              encoding: "base64", //编码格式
              success: (nres) => {
                  let data="data:image/jpg" +";base64," +nres.data //base64地址
                  //后续操作
                 uni.uploadFile({
                   url:getApp().globalData.apiDomain + 'user/updateUserHeaderImgAndName',
                   filePath:e.detail.avatarUrl,
                   name:'file',
                   header: {
                   'token':uni.getStorageSync('wbyun_token'),
                   'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
                   'wbapp':'weixin_mp_xbgy'
                   },
                   formData:{
                   'headimg':data
                   },
                   success:(res) => {
                     console.log(res);
                     // this.headimg = res.data.data.url
                     let data = JSON.parse(res.data)
                     if(data.code == 200) {
                       uni.showToast({
                         	title: data['msg'],
                         	icon: 'none'
                         });
                         this.headimg = e.detail.avatarUrl
                         uni.setStorageSync('wbyun_headimg',e.detail.avatarUrl);
                     }
                   }
                 })
                  
              },
              fail: (res) => reject(res.errMsg),
         })
        
        // this.avatarUrl
      
      },
      nameInput(e) {
        this.bcname = e.detail.value
        console.log(e.detail.value);
        
      },
      getname(e) {
        
         this.$refs.inputDialog.open('center')
      },
      btnnameok() {
        var that = this
        		uni.request({
        			url: getApp().globalData.apiDomain + 'user/updateUserHeaderImgAndName',
              header: {
              	'token':uni.getStorageSync('wbyun_token'),
                'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
                'wbapp':'weixin_mp_xbgy'
              },
        			method:'POST',
        			data: {   
        				'username': that.bcname,
     
        			},
        			success(data) {
        				console.log(data);
                if(data.data.code == 200) {
                  uni.showToast({
                  	title: data['data']['msg'],
                  	icon: 'none'
                  });
                  that.username = that.bcname
                  uni.setStorageSync('wbyun_username',that.bcname);
                  that.$refs.inputDialog.close()
                 
                }
        				
        			}
        		})
      },
      cancelname() {
        this.$refs.inputDialog.close()
      },
      getUserProfile() {
        
        
        
        
        // wx.getUserProfile({
        // 	desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        // 	success: (res) => {
        // 		console.log(res.userInfo.nickName,res.userInfo.avatarUrl,'999');
        // 		var nickName = res.userInfo.nickName
        //     var avatarUrl = res.userInfo.avatarUrl
        // 		wx.request({
        // 			url: getApp().globalData.apiDomain + 'user/updateUserHeaderImgAndName',
        //       header: {
        //       	'token':uni.getStorageSync('wbyun_token'),
        //         'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        //         'wbapp':'weixin_mp_xbgy'
        //       },
        // 			method:'POST',
        // 			data: {   
        // 				'username': res.userInfo.nickName,
        // 				'headimg':res.userInfo.avatarUrl
        // 			},
        // 			success(data) {
        // 				console.log(data);
        //         if(data.data.code == 200) {
        //           uni.showToast({
        //           	title: data['data']['msg'],
        //           	icon: 'none'
        //           });
        //          uni.setStorageSync('wbyun_headimg',avatarUrl);
        //          uni.setStorageSync('wbyun_username',nickName);
        //          that.headimg = avatarUrl
        //          that.username = nickName
                 
        //           console.log(that.username,'123');
                 
        //         }
        				
        // 			}
        // 		})
        // 	}
        // })
      },
      gainuser(id) {
        console.log('888888888');
        uni.request({
             	url: getApp().globalData.apiDomain+'/user/getLoginInfo',
             	method: 'POST',
             	header: {
             	    'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
                  'wbapp':'weixin_mp_xbgy'
             	},
              data:{
                'user_id':id
              },
             	dataType:'json',
             	success: res => {
             		console.log(res);    
             		if(res['data']['code']==200){
                 uni.setStorageSync('wbyun_token', res.data.datas.token);
                 uni.setStorageSync('wbyun_tel', res.data.datas.tel);
                 uni.setStorageSync('wbyun_icode', res.data.datas.icode);
                 uni.reLaunch({
                   url:'/pages/mine/mine'
                 })
             			return;
             		}else{
             			uni.showToast({
             				title: res['data']['msg'],
             				icon: 'none'
             			});
             		}
             	},
             	fail: () => {},
             	complete: () => {
             		uni.hideLoading();
             	}
             });
      }
   
		}
	}
</script>

<style lang="less">
	body {
		background-color: rgb(247, 247, 247);
	}

	.user-datum {
		width: 100%;
		height: 220rpx;
		background-color: #4193FE;

		.user-header {
			display: flex;
      padding-top: 50rpx;
			margin-left: 50rpx;
     
			.user-head {
				width: 120rpx !important;
				height: 120rpx !important;
        margin: 0;
        padding: 0;
				// background-color: #ebebeb;
        
				border-radius: 10rpx;
			}

			.user-xx {
				margin-left: 20rpx;
        
			}

			.user-name {
				color: #fff;
				font-size: 35rpx;
				font-weight: 700;
			}

			.user-phone {
				color: #fff;
				font-size: 22rpx;
			}
		}

		.turnvip {
			position: relative;
			display: flex;
			align-items: center;
			width: 95%;
			height: 90rpx;
			margin: 36rpx auto 0 auto;
			background-color: rgb(51, 51, 51);
			border-radius: 8rpx;

			.turnvip-box {
				width: 95%;
				margin: auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				color: #e6c888;
				

				.vipsi {
					width: 65%;
          padding-left: 15rpx;
					font-size: 27rpx;
					font-weight: 700;
				}

				.vipimg {
					width: 45rpx;
					height: 35rpx;
				}

				.grant {
					width: 160rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 25rpx;
					background-color: #e6c888;
					border-radius: 20rpx;
          padding: 0;
				}
			}

			.arc {
				position: absolute;
				bottom: 0;
				margin-bottom: -10rpx;
				width: 100%;
				height: 20rpx;
				background-color: rgb(51, 51, 51);
				border-radius: 50%;

			}
		}
	}

	.middle {
		width: 95%;
		margin: auto;

		.vd-box {
			width: 100%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			font-size: 30rpx;

			.residue-V {
				width: 100%;
				height: 150rpx;
				display: flex;
				font-size: 35rpx;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				border-radius: 20rpx;

				.residue-text {
					color: #4193FE;
					font-size: 65rpx;
          margin: 0 25rpx;
          margin-top: -10rpx;
					font-weight: 700;
				}
			}

		}

		.fllist {
			width: 100%;
			margin-top: 40rpx;
			font-size: 40rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.zl-list,
			.zl-list1 {
				width: 90%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				margin: auto;
				font-size: 32rpx;
				color: #232323;

			}

			.zl-list1 {

				border-bottom: 1rpx solid #eeeeee;

			}
		}
	}

	.iconright {
		color: #c5c5c5 !important;

	}
  .getlogin {
    border: 0;
    font-size: 20rpx;
    background-color: #54a7fe;
    color: #ffffff;
  }
  .userphone {
    font-size: 30rpx;
    margin-top: 20rpx;
  }
  .namebox {
    width: 600rpx;
    height: 400rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    
  }
  .xgname {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 35rpx;
    background-color: #4193FE;
    color: #fff;
    margin-bottom: 50rpx;
    
  }
  .assfh {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sffname {
    height: 90rpx;
    line-height: 90rpx;
  }
  .getinput {
    height: 90rpx;
    line-height: 90rpx;
    padding: 15rpx;
    font-size: 35rpx;
    background-color: #eeeeee;
    
  }
  .buttonok {
    width: 150rpx;
    color: #fff;
    background-color: #4193FE;
  }
  .buttoncancel {
    width: 150rpx;
  }
</style>